<template>
  <el-card shadow="never">
    <template #header v-if="!hide">
      <el-row justify="space-between" style="margin-bottom: 0;">
        <el-row :gutter="gutter" align="middle" class="mb8">
          <el-col :span="span" v-if="addBtn">
            <el-button
              v-has-permi="props.addPermi ? props.addPermi : ['*.*.*']"
              type="primary"
              icon="Plus"
              @click="emits('handleAdd')"
              >{{props.addBtnText}}</el-button
            >
          </el-col>
          <el-col :span="span" v-if="exportBtn">
            <el-button v-has-permi="props.exportPermi ? props.exportPermi : ['*.*.*']" plain @click="emits('handleExport')">
              <svg-icon icon-class="export" />
              <span style="color: rgb(0, 112, 255);">{{$t('crud.exportText')}}</span>
            </el-button>
          </el-col>
          <el-col :span="span" v-if="delBtn" class="ml10" style="display: flex;align-items: center;">
            <el-checkbox v-model="isAll" @change="(e) => emits('changeAll', e)" :indeterminate="isIndeterminate" label="all" size="large">
              <div class="checkbox-txt">
                {{ t('crud.selectedItemTooltip', { 'count': props.multipleSelection.length || 0})}}
              </div>
            </el-checkbox>
            <el-button
              class="ml10"
              type="danger"
              link
              icon="Delete"
              v-has-permi="props.delPermi ? props.delPermi : ['*.*.*']"
              :disabled="props.multipleSelection.length === 0"
              @click="handleDel"
            >
              {{$t('crud.deleteText')}}
            </el-button>
          </el-col>
          <el-col :span="25">
            <slot name="leftToolbar"></slot>
          </el-col>
        </el-row>
        <div class="rightToolbar">
          <slot name="rightToolbar"></slot>
        </div>
      </el-row>
    </template>
    <div>
      <slot></slot>
    </div>
  </el-card>

</template>
<script lang="ts" setup>
import { funProps } from './props/crudProps'
import { useI18n } from 'vue-i18n'
import { ElMessageBox } from 'element-plus'
const props = defineProps({...funProps})

const { t } = useI18n()

// 参数
// const showSearch = ref(false)
const isAll = ref(false)
const isIndeterminate = ref(false)
const emits = defineEmits(['handleAdd', 'handleDel', 'handleExport', 'reloadData', 'changeAll'])

const handleDel = () => {
  ElMessageBox.confirm(
    `是否确认批量删除${props.multipleSelection.length}条数据?`,
    '提示',
    {
      type: 'warning',
    }
  )
    .then(() => {
      emits('handleDel', props.multipleSelection)
    })
}
watch(() => props.multipleSelection, (newV) => {
  isAll.value = newV.length === props.limit
  isIndeterminate.value = 0 < newV.length && newV.length < props.limit
})
</script>

<style lang="scss" scoped>
.rightToolbar {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.checkbox-txt {
  color: #333;
  span {
    color: var(--el-color-primary);
    font-weight: 600;
  }
}
::v-deep(.el-checkbox.el-checkbox--large) {
  height: auto;
}
</style>
